V30_Vue的小專案_youtube點播機(4)

終於來到這最後的一篇了
前3篇的發文 完成了 Vue版的 Youtube點播機
最後一篇就用 Vue版的 Youtube點播機 的使用說明來結束這回合

這是線上試用的網址，也歡迎大家的回饋分享

Vue Youtube Player
https://www.moc2718.com/vue_ytplayer/index.html

首先要執行 vite build 來發布
為了可以在子目錄vue_ytplayer開啟網頁
要修改 vite.config.js 的設定

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/vue_ytplayer',
  build: {
    outDir: './vue_ytplayer',
    emptyOutDir: true
  }
})

最後將 /vue_ytplayer/. 的檔案 上傳到主網站的 /vue_ytplayer/. 目錄下就可以了

主要的功能有

1. 新增影片
2. 刪除影片
3. 修改影片資料
4. 切換下一個影片
5. 下載播放清單
6. 上傳播放清單

** 新增影片 **

1. 點擊 Input Youtube URL 欄位，欄位會先清空，
2. 接著貼上youtube 影片連結，
3. 按下「新增」按鈕，就會切換到該影片，並自動播放。
4. 同時會讀取影片的標題，並寫回 Input Youtube Title 欄位
5. 底下的播放清單，也會新增一筆影片資料，

6. 也可以自行輸入 Youtube Title 及 Youtube Album 的欄位資料
   點擊欄位時都會先清空欄位，
   建議可以先在記事本編輯好，再貼上去

7. 也可以從youtube的網頁上複製影片資料
   要複製影片的連結來源，可以右鍵點擊影片，點選「複製連結網址」
   要複製影片的標題來源，可以右鍵點擊標題，點選「複製」
   然後分別貼到 Input Youtube URL 及 Input Youtube Title

8. 新增的影片，會存在播放清單中，一定要記得下載清單
   一旦網頁重整或是關掉網頁，播放清單就會清空

** 刪除影片 **

1. 點擊底下的播放清單的videoID，切換到該影片
2. 按下「刪除」按鈕，就會刪除該影片，並切換到下一個影片

** 修改影片資料 **

1. 點擊底下的播放清單的videoID，切換到該影片
2. 修改 Youtube Title 及 Youtube Album 的欄位資料
3. 按下「修改」按鈕，就會更新到播放清單中

** 切換下一個影片 **

1. 按下「下一首」按鈕，切換到下一個影片
2. 若是最後一首的下一首，會切換到第1首
3. 若是點擊底下的播放清單的videoID，會切換到該影片

** 下載播放清單 **

1. 按下「下載清單」按鈕，會跳出儲存位置的對話框，可以更改檔案名稱，最後是存成JSON格式，例如 youtube_list.json
2. 打開youtube_list.json檔案，可以根據JSON格式。進行清單的編輯

** 上傳播放清單 **

1. 按下「選擇檔案」按鈕來挑選 .json 檔案
2. 當挑選完檔案後，就會更新成新的播放清單
3. 播放新的播放清單的第1個影片

** 循環播放 **

1. 每一個影片播完後，會自動循環播放下一首
2. 影片本身的操作，使用影片本身提供的操作工具即可，像是全螢幕，跳轉等

說明到這邊，iThome鐵人賽也走到終點了，真的需要強大的意志力。
不過，成就感十足，
這個系列 業主說給你30天學會Vue
其實是一種 業主展現信任的表現
現在技術發展的又快又多，
實在是很難全都學會
但是有案子來的時候是最佳的學習機會
業主說給你30天學會Vue
就是一種信任與默契
有在接案的就懂

總之鐵人賽完成了，Vue也算是有進入狀況了
剩下就是靠案子來練功了

這個 Vue版的 Youtube 點播機，
是第一個用Vue開發的程式
希望大家會用的高興